<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./07.myvue.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      var vm = new Vue({
        el: '#app', // Compile 解析vue语法
        data: {
          name: '张三',
          age: 18,
          yy: {
            // yy值又是对象 我们就要使用递归完成数据劫持 明天再说好吧
            a: 10,
            b: {
              cc: 10,
            },
          },
        },
        watch: {
          name: function (newName, oldName) {
            console.log(`name改变了-最新的name值是${newName}----以前的name值是${oldName}`, '111111');
          }
        },
      });
      // 也可以这样触发
      vm.$watch('age', function (newAge, oldAge) {
        console.log(newAge, oldAge, '$watch');
      });
      // 数据发生改变 应该通知所有的订阅者更新
      // vm.name = '白起';
      // Wachter dep收集器 发布订阅...
    </script>
  </body>
</html>
